<template>
  <div class="map">
    <div id="containerMap"></div>
    <!-- <div id="panel">
      <el-input
        type="text"
        v-model="keyword"
        class="btn"
        suffix-icon="el-icon-search"
        placeholder="输入关键字，搜索相关地点"
        clear
        clearable
      />
      <ul class="infinite-list" style="overflow: auto">
        <li
          v-for="(item, index) in suggestionList"
          class="infinite-list-item"
          :key="index"
          @click="setSuggestion(item)"
        >
          <span>{{ `[${item.title}]` }}</span>
          <span>{{ item.address }}</span>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import { get } from "@/request/interface";
export default {
  props: {
    currentInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      map: null,
      keyword: null,
      suggestionList: [],
      infoWindowList: [],
      count: 0,
      addressInfo: {},
    };
  },
  mounted() {
    this.initMap();
  },
  watch: {
    keyword: {
      handler(val) {
        this.searchByKeyword();
      },
    },
  },
  methods: {
    initMap() {
      this.$utils.qqMap().then((res) => {
        const center = new window.TMap.LatLng(39.98412, 116.307484);
        this.map = new window.TMap.Map("containerMap", {
          zoom: 18,
          center: center,
          baseMap: {
            type: "roadmap",
          },
        });
        this.markers = new window.TMap.MultiMarker({
          map: this.map,
          geometries: [],
        });
        this.positionAdress(this.currentInfo);
      });
    },
    positionAdress(data) {
      if (data.address && data.address != "") {
        this.address = {
          name: data.address,
          lat: data.latitude,
          lng: data.longitude,
        };
        let location = new window.TMap.LatLng(data.latitude, data.longitude);
        this.markers.updateGeometries([
          {
            id: "0", // 点标注数据数组
            position: location,
          },
        ]);
        let info = new window.TMap.InfoWindow({
          map: this.map,
          position: location,
          content: `<h3>${data.address}</h3>`,
          offset: { x: 0, y: -50 },
        });
        this.infoWindowList.push(info);
        this.map.setCenter(location);
        this.markers.on("click", (e) => {
          this.infoWindowList[Number(e.geometry.id)].open();
        });
      }
    },
    //关键字查询
    searchByKeyword() {
      if (this.keyword) {
        let params = {
          output: "jsonp",
          callbackName: "QQmap",
          keyword: this.keyword,
          key: "LDJBZ-JSFCX-2PE4O-TUXJ6-UR7U3-I3FD5",
          pageSize: 10, // 返回结果每页条目数
        };
        let url = "https://apis.map.qq.com/ws/place/v1/suggestion";
        this.$jsonp(url, params)
          .then((res) => {
            this.suggestionList = [];
            let data = JSON.parse(JSON.stringify(res.data));
            data.forEach((item) => {
              this.suggestionList.push(item);
            });
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    setSuggestion(item) {
      this.count = 0;
      let location = new window.TMap.LatLng(
        item.location.lat,
        item.location.lng
      );
      // const markers = new window.TMap.MultiMarker({
      //   map: this.map,
      //   geometries: [],
      // });
      if (this.infoWindowList.length > 0) {
        this.infoWindowList.forEach((infoWindow) => {
          infoWindow.close();
        });
        this.infoWindowList.length = 0;
      }
      this.keyword = item.title;
      this.suggestionList = [];
      this.markers.setGeometries([]);
      this.markers.updateGeometries([
        {
          id: "0", // 点标注数据数组
          position: location,
        },
      ]);
      const infoWindow = new window.TMap.InfoWindow({
        map: this.map,
        position: location,
        content: `<h3>${item.title}</h3><p>地址：${item.address}</p>`,
        offset: { x: 0, y: -50 },
      });
      this.infoWindowList.push(infoWindow);
      this.map.setCenter(location);
      this.markers.on("click", (e) => {
        this.infoWindowList[Number(e.geometry.id)].open();
      });
      this.addressInfo = {
        name: item.title,
        lat: item.location.lat,
        lng: item.location.lng,
      };
      //this.$emit("getAdress", item.title, item.location.lat, item.location.lng);
    },
    //获取地址信息
    getAdressInfo() {
      return this.addressInfo;
    },
  },
};
</script>

<style lang="less" scoped>
.map {
  position: relative;
  min-height: 400px;
  #container {
    height: 400px;
  }
  #panel {
    position: absolute;
    background: #fff;
    width: 350px;
    padding: 20px;
    z-index: 1000;
    top: 30px;
    left: 30px;
  }
  .infinite-list {
    .infinite-list-item {
      padding: 5px 0;
      cursor: pointer;
    }
    .infinite-list-item:hover {
      background: #fff;
    }
  }
}
</style>